<!-- 默认时间约定方式 -->
<template>
	<view class="content" style="height: 100%;">
		<BaseNavBar :isnormal="false" title="默认时间约定方式" />
		<view class="body" style="background-color: white;padding: 0 15px;overflow-y: auto;padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);flex: 1;">
			<view class="label-name">
				时间约定方式
			</view>
			<view class="radio-wrap">
				<radio-group @change="change">
					<label v-for="item in radioGroup" :key="item.name">
						<radio :value="item.name" :checked="item.name==activeRadio" />{{item.name}}
					</label>
				</radio-group>
				
				<!-- :class="{'checked':checkedArr.includes(String(item.id))}" -->
				<checkbox-group class="block" @change="changeCheckbox" style="display: flex;flex-wrap: wrap;justify-content: space-between;font-size: 14px;">
					<view v-for="item in checkboxData" :key="item.val">
						<view class="singleCheckedTitle">
							<checkbox style="transform:scale(0.8)" color="rgba(64, 128, 255, 1)" :value="item.val"
								:checked="item.choose">{{item.val}}</checkbox>
	
						</view>
					</view>
				</checkbox-group>
			</view>
		</view>
		<button form-type="submit" class="page-btn" @click="submit()">保存</button>
	</view>
</template>

<script>
	import { skillOption, selectOption, updateUserInfor } from '../../api'
	export default {
		data() {
			return {
				allSkills: [],
				myskillType: [],
				activeRadio: '',
				radioGroup: [],
				extendList: [],
				checkboxData: [{
					val:'日期',
					choose: false
				},{
					val:'起始时间',
					choose: false
				},{
					val:'截止时间',
					choose: false
				}],
			}
		},
		mounted() {
			this.getSkillOption()
		},
		methods: {
			getSkillOption() {
				skillOption().then(res => {
					console.log('个人技能页===', res)
					if(res.status == 200) {
						let allSkills = res.data.skillTypes
						let userId = uni.getStorageSync('userInfo').id
						this.radioGroup = res.data.timeLimitTypes
						
						selectOption(userId).then(res => {
							console.log('默认时间约定方式页===111', res)
							if(res.status == 200) {
								if(res.data.timeLimitType){
									this.timeLimitType = JSON.parse(res.data.timeLimitType).name
									this.extendList = JSON.parse(res.data.timeLimitType).extendList
									this.radioGroup.forEach((item,index)=>{
										if(item.name == this.timeLimitType){
											console.log(index,'选中值')
											this.activeRadio = item.name
										}
									})
									// this.checkboxData.map(item=>{
									// 	if(item.choose) {
									// 		this.extendList = this.extendList.concat('是')
									// 	} else {
									// 		this.extendList = this.extendList.concat('否')
									// 	}
									// })
									if(this.extendList){
										this.extendList.map((item,index)=>{
											this.checkboxData[index].choose = item == '是' ? true : false
										})
									}
									
								}
								
							}
						})
					}
					
				})
			},
			change(e) {
				this.activeRadio = e.detail.value;  //选中按钮的value值
				this.checkboxData.map(item=>{
					item.choose = false
				})
				console.log(this.activeRadio);
			},
			changeCheckbox(e) {
				let valArr = e.detail.value
				valArr.forEach(item=>{
					this.checkboxData.map(v=> {
						if(item == v.val){
							v.choose = true
						}
					})
				})				
				console.log(this.checkboxData)
			},
			submit(){
				if(!this.activeRadio){
					uni.showToast({
						title: '请选择默认时间约定方式',
						icon:'none',
					})
					return
				}
				let extendList = []
				this.checkboxData.map(item=>{
					if(item.choose) {
						extendList = extendList.concat('是')
					} else {
						extendList = extendList.concat('否')
					}
				})
				this.extendList = extendList
				console.log(extendList,'sssssssssss')
				let userInfo = uni.getStorageSync('userInfo')
				let timeLimitType = {
						name:this.activeRadio,
						extendList:this.extendList
					}
				let data = {
					id: userInfo.id,
					timeLimitType: JSON.stringify(timeLimitType)
				}
				updateUserInfor(data).then(res => {
					console.log('个人信息页===', res)
					if (res.status == 200) {
						uni.showToast({
							title: '保存成功',
						})
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.body{
		font-size: 14px;
		.label-name {
			line-height: 60px;
			
		}
		.radio-wrap{
			radio-group{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				radio{
					margin: 0 6px 15px 0;
				}
			}
			
		}
	}
	
</style>